<template>
  <!-- 条件配置 -->
  <div class="condition-layout">
    <div class="group" v-for="group in props.config.conditions">
      <div class="header">
        <div class="title">条件组</div>
        <div class="del-group-btn">
          <el-icon :size="14" class="btn" @click="deleteGroup(group)">
            <Delete />
          </el-icon>
        </div>
      </div>
      <div class="body">
        <div class="conditions">
          <div class="condition" v-for="condition in group">
            <div class="label">{{condition.label}}</div>
            <div class="content">
              <BaseCondition :data="condition" />
            </div>
            <div class="del-btn">
              <el-icon :size="14" class="btn" @click="deleteCondition(group, condition)">
                <Delete />
              </el-icon>
            </div>
          </div>
          <div class="add-condition-btn">
            <el-button icon="Plus" @click="addCondition(group)">添加条件</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="add-group-btn">
      <el-button type="primary" icon="Plus" @click="addGroup">添加条件组</el-button>
    </div>

    <el-dialog v-model="open" title="选择条件" width="500">
      <div>
        请选择用来区分审批流程的条件字段 ，已选{{selectedFields.length}}个
        <el-checkbox-group v-model="selectedFields">
          <el-checkbox v-for="item in choseConditionData" :label="item.name">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" @click="confirmCondition">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ConditionDrawer">
import BaseCondition from "../../components/condition/BaseCondition.vue";
import {getCurrentInstance, inject, onMounted, ref} from "vue";
import { KEY_PROCESS_DATA, KEY_PROCESS_CTRL } from "../../config/keys"
import {copy} from "@/utils/tools";

const props = defineProps({
  config: { // 传入的流程配置数据
    type: Object,
    default: {}
  }
});

const { proxy } = getCurrentInstance();
const open = ref(false);
const choseConditionData = ref([]);
const selectedFields = ref([]);
let tmpGroup = []

// 获取流程数据
const processData = inject(KEY_PROCESS_DATA)
const processCtrl = inject(KEY_PROCESS_CTRL)

onMounted(async () => {
  init()
});

function init() {
  if (!props.config.conditions) {
    props.config.conditions = [
      []
    ]
  }
}

function addGroup() {
  props.config.conditions.splice(props.config.conditions.length, 0, [])
}

function deleteGroup(group) {
  props.config.conditions.splice(props.config.conditions.indexOf(group), 1)
}

function addCondition(group) {
  tmpGroup = group
  let tmpSelectedFields = []
  if (group) {
    group.forEach((item => {
      tmpSelectedFields.push(item.name)
    }))
  }

  selectedFields.value = tmpSelectedFields

  let formFields = processCtrl.getFormFields()
  let tmpChoseData = []
  if (formFields) {
    formFields.forEach(field => {
      if (field.isCondition) {
        tmpChoseData.push({
          "name": field.name, // 字段名
          "label": field.label, // 字段名
        })
      }
    })
  }
  choseConditionData.value = tmpChoseData
  open.value = true
}
function confirmCondition() {
  let tmpCondition = []
  let oldConditionMap = new Map
  let formFieldsMap = processCtrl.getFormFieldsMap()
  tmpGroup.forEach(item => {
    oldConditionMap.set(item.name, item)
  })
  selectedFields.value.forEach(field => {
    let item = oldConditionMap.get(field)
    if (item != null) {
      tmpCondition.push(item)
    } else {
      item = copy(formFieldsMap.get(field))
      tmpCondition.push({
        "name": item.name, // 字段名
        "label": item.label, // 字段名
        "type": item.type, // 类型
      })
    }
  })
  tmpGroup.splice(0, tmpGroup.length)
  tmpGroup = tmpGroup.push(...tmpCondition)
  open.value = false
}
function deleteCondition(group, condition) {
  group.splice(group.indexOf(condition), 1)
}
</script>

<style lang="less" scoped>
.condition-layout {
  .group {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin-bottom: 20px;

    .header {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #cccccc;
      padding: 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      .title {
        flex: 1;
      }
      .del-group-btn {
        width: 20px;
      }
    }
    .body {
      padding: 10px;
      .conditions {
        display: flex;
        flex-direction: column;

        .condition {
          display: flex;
          flex-direction: row;

          .label {
            width: 100px;
            padding-top: 5px;
            font-size: 14px;
          }
          .content {
            flex: 1
          }
          .del-btn {
            width: 40px;
            padding-top: 5px;
            text-align: center;
          }
        }
      }
      .add-condition-btn {
        margin-top: 20px;
      }
    }

  }
  .add-group-btn {
    margin-top: 20px;
  }
  .btn {
    cursor: pointer;
  }
}
</style>
